<template>
    <el-link type="primary" @click="is_show = true">登录</el-link>
    <el-dialog @close="close" v-model="is_show" title="请登录" width="500px" draggable>
        <el-form ref="loginFormRef" :model="loginForm" :rules="rules">
            <el-form-item prop="phone">
                <el-input v-model="loginForm.phone" class="w-50 m-2" size="large" placeholder="请输入网易云音乐账号（手机号）"
                    prefix-icon="User" />
            </el-form-item>
            <el-form-item prop="pwd">
                <el-input v-model="loginForm.pwd" class="w-50 m-2" size="large" placeholder="请输入网易云音乐密码"
                    prefix-icon="Lock" show-password />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="onSubmit">登录</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { ref } from 'vue'
import { ElNotification, ElMessage } from 'element-plus';
import { serachHot, login, getUserInfo } from '@apis/http';
import { useStore } from 'vuex'


export default {
    data() {
        return {
            loginForm: {
                phone: '',
                pwd: ''
            },
            rules: {
                phone: [
                    { required: true, message: '请输入网易云音乐账号（手机号）', trigger: 'blur' }
                ],
                pwd: [
                    { required: true, message: '请输入网易云音乐密码', trigger: 'blur' }
                ]
            },
            is_show: false
        };
    },
    methods: {
        onSubmit() {
            this.$refs.loginFormRef.validate(async (valid) => {
                if (valid) {
                    console.log(this.loginForm)
                    await login({
                        phone: this.loginForm.phone,
                        password: this.loginForm.pwd
                    }).then(res => {
                        console.log("回调=" + res);

                        if (res.code === 200) {
                            console.log("code1=" + res.code);
                            this.UserDetalis(res.profile.userId);
                            localStorage.setItem('token', res.token);
                            localStorage.setItem('cookie', res.cookie);

                            this.is_show = false;
                            ElMessage({
                                message: '登录成功',
                                type: 'success',
                            })
                        } else if (res.code === 502) {
                            console.log("code2=" + res.code);

                            ElMessage({
                                message: res.message,
                                type: 'warning',
                            })
                        }
                        else {
                            ElNotification({
                                type: "error",
                                title: "提示",
                                message: "接口请求错误，请查看login()接口",
                            });

                        }
                    });

                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        UserDetalis(userId) {
            getUserInfo({ uid: userId }).then(res => {
                // console.log(res)
                if (res.code === 200) {
                    console.log("昵称=" + res.profile.nickname)
                    localStorage.setItem('isLogin', true);
                    localStorage.setItem('userInfo', JSON.stringify(res.profile));
                }
                else {
                    ElNotification({
                        type: "error",
                        title: "提示",
                        message: "接口请求错误，请查看getUserInfo()接口",
                    });
                }
            })
        },
        close() {
            console.log('关闭')
        }
    }
}
</script>